<!--用户管理页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding: 10px 20px;">
    <span style="font-size:20px;line-height: 60px;">点赞信息</span>
  </div>
  <!-- 用户信息表格 -->
  <el-card style="margin: 20px;">
    <el-table :data="likeArr">
      <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
      <el-table-column prop="imgUrl" label="头像" width="80" align="center">
        <template #default="{ row }">
          <el-image
              :src="BASE_URL+row.imgUrl"
              fit="cover"
              style="width: 50px; height: 50px; border-radius: 50%;">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名" align="center"></el-table-column>
      <el-table-column prop="title" label="标题" align="center"></el-table-column>
      <el-table-column prop="createTime" label="点赞时间" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" link
                     :disabled="scope.row.level==40" @click="deleteUser(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
//定义数组用来保存用户列表数据
const likeArr = ref([
  {
    username: '',
    imgUrl: '',
    title: '',
    createTime: '',
  }
]);

//定义加载点赞数据的方法
const loadLike = () => {
  //如果有查询条件,就根据条件查,没有查询条件,默认查全部员工信息
  axios.get(BASE_URL + '/v1/likes/select?').then((response) => {
    //如果后端返回的状态码是2000,说明成功了
    if (response.data.code == 2000) {
      //把成功请求回来的数据装到与表格绑定的数组中
      likeArr.value = response.data.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}
//删除点赞
const deleteUser = (likeId) => {
  if (confirm('您确认要删除该点赞信息吗?')) {
    axios.post(BASE_URL + '/v1/likes/delete/' + likeId).then((response) => {
      if (response.data.code == 2000) {
        ElMessage.success('删除成功!');
        //删除成功后,重新加载用户列表
        loadLike();
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}
//页面加载完毕立即调用的方法
onMounted(() => {
  //加载员工数据
  loadLike();
})

</script>


<style scoped>

</style>